<template>
<div>
 

<input type="checkbox" @change="checkboxShow"   :id="modalName"   class="modal-toggle"> 
<div class="modal ">

  <div class="modal-box  p-2 md:p-6 ">
    <div class="card   side ">
                        <div class="flex-row items-top space-x-4 card-body p-0 rounded-0">
                           
                                <div v-if="type=='topic'" class=" w-24 h-24 bg-cover uploadBox mt-4"  title="Upload an image as cover image"> 
                                     <input @change="changeHandler" data-name="cover" accept="image/*" type="file" />
               
                                        <img    class="mt-4 w-full h-auto" :src="cover.url?cover.url:'/images/cover.png'">
                                        <div   v-if="cover.percent>0" class="text-gray-500 text-center text-sm">Uploading:{{cover.percent}}%</div>
                                        <div   v-else class="text-gray-500 text-center  text-sm">Cover Image </div>
                                        
                                                                      
                                </div>
                                  
                                <div class="card-body p-1 rounded-0 " >
                                    <div  v-if="type=='topic'"> <input v-model="title" type="text" style="outline:0px;" placeholder="Title" class="  m-0  w-full h-10  text-gray-600"></div>
                                    <div v-else class="m-0  w-full  line-2  text-gray-600" v-html="intdata.title"></div>
                                    <div> <textarea type="text" :id="modalName+'_content'"   v-html="intdata.content"  style="outline:0px;" :placeholder="contentPlaceholder" class=" m-0  w-full h-60 border-b border-gray-200 text-gray-600"></textarea></div>
                                    <div class="items-center justify-center text-gray-600 pt-2">
                                            <div class="float-left" >
                                                <a @click="hideUploadVideo" class="inline-block tooltip  tooltip-top uploadBox" data-tip="Upload Images" >
                                                    
                                                    <input @change="changeHandler" data-name="images"  multiple="multiple" accept="image/*" type="file">
                                                    <svg t="1642053012383" class="h-5 w-5    inline-block" viewBox="0 0 1029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2877" width="200" height="200"><path d="M661.23 1003.042H119.672c-64.034 0-116.053-51.883-116.053-115.712V115.917C3.618 52.224 55.638 0.068 119.671 0.068H893.27c63.898 0 115.985 52.02 115.985 115.849v539.99c0 21.23-17.34 38.775-38.707 38.775s-38.912-17.34-38.912-38.776v-539.99c0-21.23-17.34-38.638-38.57-38.638H119.67c-21.299 0-38.912 17.408-38.912 38.639v771.14c0 21.231 17.613 38.639 38.912 38.639h541.492c21.162 0 38.707 17.203 38.707 38.639 0.068 21.3-17.545 38.707-38.64 38.707z" fill="" p-id="2878"></path><path d="M42.325 771.755c-9.762 0-19.729-4.028-27.238-11.606-14.95-14.95-14.95-39.458 0-54.408l192.785-192.034c35.157-35.158 89.156-44.169 133.803-21.777L551.39 596.65c14.814 7.578 32.768 4.643 44.373-7.167l347.614-346.317c14.95-15.019 39.458-15.019 54.682 0 15.223 14.882 15.087 39.39 0 54.545l-347.75 346.317c-35.09 35.089-88.816 43.759-133.667 21.367L306.86 561.084c-14.95-7.578-32.7-4.506-44.374 7.168L69.7 760.012c-7.51 7.578-17.34 11.743-27.375 11.743zM351.71 385.775c-63.898 0-116.053-51.746-116.053-115.712 0-63.898 51.882-115.712 116.053-115.712 63.76 0 116.053 51.883 116.053 115.712 0 63.898-52.36 115.712-116.053 115.712z m0-154.146c-21.163 0-38.776 17.271-38.776 38.502 0 21.368 17.477 38.64 38.776 38.64 21.163 0 38.639-17.272 38.639-38.64 0-21.23-17.34-38.502-38.64-38.502zM834.833 1024c-21.367 0-38.844-17.203-38.844-38.775V753.869c0-21.095 17.204-38.64 38.844-38.64 21.163 0 38.776 17.34 38.776 38.64v231.356c-0.069 21.572-17.545 38.775-38.776 38.775z" fill="" p-id="2879"></path><path d="M989.389 868.284c-9.49 0-18.978-3.345-26.76-10.377l-127.864-120.15-128.478 120.15c-15.36 14.404-39.8 13.858-54.409-1.57-14.677-15.633-13.994-39.868 1.707-54.682L788.89 674.611c11.127-13.721 27.58-21.436 45.533-21.436 17.818 0 34.27 7.988 45.261 21.436l135.441 127.044c15.702 14.814 16.52 38.912 1.775 54.682-6.758 7.782-17.066 11.947-27.511 11.947z" fill="" p-id="2880"></path></svg>
                                                    <!-- <span class="text-sm text-gray-600">Upload Images</span> -->
                                                </a>
                                                <div @click="showUploadVideo" class="inline-block tooltip  tooltip-top" data-tip="Video link">
                                                    <svg t="1642052959472" class="h-5 w-5  ml-2 inline-block" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2146" width="200" height="200"><path d="M919.363847 0 104.74909 0C46.925334 0 0 46.812397 0 104.692622L0 919.307378c0 57.880225 46.925334 104.692622 104.74909 104.692622l814.614757 0c57.823756 0 104.74909-46.755928 104.74909-104.692622L1024.112937 104.692622C1024.112937 46.812397 977.244072 0 919.363847 0zM589.926547 172.906584l49.861696 0 0 157.264806c0 30.210654 0.959965 29.307158 1.976398 33.090548 1.072902 4.009264 4.686887 13.439506 16.375869 13.439506 12.423073 0 15.867652-9.938458 16.827617-14.173597 0.790559-3.670453 1.694055-2.936363 1.694055-34.445792L676.662182 172.906584l49.805228 0 0 236.038381-50.48285 0 0.621154-11.914856L661.246278 390.649167c-3.896327 7.905592-8.413808 13.552443-13.947723 17.505239-5.590383 3.896327-11.858388 5.872725-19.312231 5.872725-8.583214 0-15.585309-1.863461-20.89335-5.533914-5.195103-3.557516-8.809088-7.96206-11.180765-13.552443-2.597552-6.211536-4.235138-12.931289-4.856292-19.538105-0.734091-7.623249-1.12937-23.377964-1.12937-46.868865L589.926547 172.906584C589.926547 172.906584 589.926547 172.906584 589.926547 172.906584zM416.681151 271.048858c0-24.620271 2.089335-43.65016 6.042131-57.146134 3.726922-12.479541 10.333738-22.305062 20.215727-29.871843C452.990405 176.181758 466.260505 172.285431 482.4105 172.285431c13.778317 0 25.580236 2.710489 35.236352 7.792655 9.373773 4.969229 16.601743 11.463108 21.514503 19.086357C544.187052 207.182971 547.6881 215.370905 549.551561 223.615308c1.919929 8.583214 2.879894 22.474468 2.879894 41.222014l0 41.560825c0 24.394397-0.959965 42.181979-2.710489 53.13687C548.026911 369.586412 544.299989 379.186059 538.709606 387.995147 533.119224 396.63483 526.173597 403.07224 517.30804 407.25091 508.160141 411.598985 497.374655 413.857726 485.290394 413.857726c-13.778317 0-25.467299-1.919929-34.841072-5.872725C441.753171 404.483953 435.089886 399.401787 430.459468 392.569097 425.716113 385.454064 422.215066 376.701445 420.125731 366.537113 417.86699 355.582221 416.73762 338.528731 416.73762 315.77192 416.73762 315.77192 416.681151 271.048858 416.681151 271.048858zM300.073674 88.82497l40.544392 130.498732c7.058564-34.106981 20.723944-81.314658 31.565898-130.498732l36.761001 0L361.624352 275.001654 361.285541 276.469836 361.285541 408.832028 318.200066 408.832028 318.200066 276.469836 317.861255 275.058123 263.312672 88.82497C263.312672 88.82497 300.073674 88.82497 300.073674 88.82497zM887.007389 818.793427c-6.43741 58.727253-58.557847 106.838425-117.002757 110.791221-172.116025 7.397375-343.723834 7.397375-515.78339 0-58.501379-3.952796-110.565347-52.063968-117.059226-110.791221-6.380942-92.947171-6.380942-184.256755 0-277.090989 6.43741-58.727253 58.557847-106.725488 117.059226-110.847689 172.059557-7.340907 343.667365-7.340907 515.78339 0 58.501379 4.122201 110.565347 52.120437 117.002757 110.847689C893.4448 634.536671 893.4448 725.846256 887.007389 818.793427zM484.556303 385.62347c7.22797 0 12.874821-4.348075 15.415904-11.858388C501.158046 370.320503 502.569758 363.770156 502.569758 345.926106L502.569758 243.66163c0-20.667475-1.185839-27.33076-2.428146-31.11415C497.600529 204.867762 492.010147 200.40675 484.725709 200.40675c-7.171501 0-12.818352 4.291607-15.472372 11.914856C467.898092 215.992059 466.542848 222.824749 466.542848 243.66163l0 99.44105c0 19.538105 1.411713 26.257858 2.65402 30.041248C471.794419 381.04952 477.384802 385.62347 484.556303 385.62347zM204.246609 559.546487l40.657329 0L252.978935 559.546487l0 8.300871 0 265.627881 51.047535 0 0-265.627881L304.02647 559.546487l8.018529 0 40.826734 0 0-51.951031L204.246609 507.595456 204.246609 559.546487zM445.649498 739.963384c0 29.420095-0.847028 36.704533-1.52465 39.810301-1.750524 7.623249-7.849123 12.253667-16.432337 12.253667-8.187934 0-14.117128-4.404544-16.037057-11.688982-0.847028-3.105768-1.750524-10.390206-1.750524-38.398588l0-155.683688L361.567884 586.256094l0 169.631411c0 22.361531 0.338811 37.269218 1.016433 44.610125 0.677622 6.719753 2.428146 13.383037 5.138635 19.651042 2.428146 5.646851 6.098599 9.994927 11.237234 13.326569 4.969229 3.444579 11.576045 5.082166 19.538105 5.082166 6.83269 0 12.761884-1.750524 17.956987-5.30804 5.364509-3.613985 10.051395-9.373773 13.891254-16.997022l15.302967 3.726922L444.971876 833.757582l49.014669 0 0-247.501489L445.705967 586.256094 445.649498 739.963384zM659.439285 598.792103c-2.65402-5.251572-6.493879-9.147899-11.576045-12.14073-5.251572-2.992831-11.688982-4.404544-19.086357-4.404544-6.211536 0-11.801919 1.52465-17.166428 4.856292-5.477446 3.501048-10.61608 8.639682-15.246498 15.867652L581.625676 625.727584l0-27.443697L581.625676 507.651925 533.288629 507.651925l0 325.879784 45.626558 0 2.823426-14.512408 3.952796-20.215727 10.729017 17.392302c4.743355 7.792655 9.994927 13.495974 15.528841 17.279365 5.251572 3.501048 10.729017 5.30804 16.71468 5.30804 8.470277 0 15.585309-2.992831 21.796846-8.809088 6.493879-6.324473 10.503143-13.383037 12.253667-21.966251 1.919929-9.48671 2.879894-24.507334 2.879894-23.490901l0-129.369361c0 0.564685 1.919929-12.874821-0.959965-39.584427C664.126172 609.972869 662.375648 604.495423 659.439285 598.792103zM617.370244 742.39153c0 23.15209-1.185839 30.210654-2.145803 33.881107-2.25874 7.96206-7.96206 12.592478-15.641778 12.592478-7.453844 0-13.157163-4.404544-15.528841-12.14073-1.12937-3.501048-2.371678-10.390206-2.371678-31.565898l0-65.559943c0-22.02272 1.12937-28.629536 2.145803-31.791772 2.202272-7.284438 7.96206-11.688982 15.359435-11.688982 7.623249 0 13.383037 4.630418 15.811183 12.479541 1.072902 3.444579 2.484615 10.333738 2.484615 31.11415l0 62.736517L617.370244 742.39153 617.370244 742.39153zM749.450094 717.206573l8.074997 0 75.385464 0 0-26.879012c0-24.337929-2.25874-52.233374-6.719753-65.2776-4.235138-12.592478-11.406639-22.305062-21.966251-29.815374-10.220801-7.22797-23.660307-11.01136-39.86677-11.01136-13.157163 0-24.902614 3.0493-34.897541 9.204367s-16.940554 14.79475-21.345098 26.483732c-4.630418 12.14073-7.058564 29.420095-7.058564 60.082497l0 75.950149c0 9.769053 1.12937 24.224992 3.162237 33.711702 2.032866 9.147899 5.70332 17.618176 10.898423 25.241425 4.912761 7.171501 12.084262 12.987758 21.119224 17.222896 9.260836 4.291607 20.215727 6.493879 32.525863 6.493879 12.592478 0 23.095621-2.202272 31.11415-6.380942 8.018529-4.235138 14.681813-10.729017 19.989853-19.312231 5.533914-8.922025 9.09143-17.44877 10.559612-25.128488 1.581118-8.074997 2.371678-20.046322 2.371678-35.631631l0-11.576045-44.948936 0 0 26.653138c0 14.117128-0.959965 23.321496-2.936363 28.85541-2.766957 7.510312-9.147899 11.914856-17.44877 11.914856-7.284438 0-12.931289-3.613985-15.472372-10.107864-1.242307-3.0493-2.65402-8.526745-2.65402-25.523768L749.337157 725.055696l0-7.792655 0.112937 0L749.450094 717.206573zM749.450094 682.478438l0-27.951914c0-20.554538 1.072902-17.44877 1.976398-20.215727 2.145803-6.606816 7.96206-10.503143 16.037057-10.503143 7.22797 0 12.761884 4.235138 14.964156 11.463108 0.903496 2.936363 2.032866 0.112937 2.032866 19.255763l0 27.951914 0 7.849123-8.074997 0-18.804015 0-8.074997 0C749.506562 690.327561 749.450094 682.478438 749.450094 682.478438z" p-id="2147" fill="#515151"></path></svg>
                                                    <!-- <span class="text-sm text-gray-600">Embed Video</span> -->
                                                </div>

                                                </div>
                                            <div class="clear-both"></div>
                                    </div>
                                     <ul v-if="uploadVideoState" role="list" class="border border-gray-200 rounded-md divide-y divide-gray-200   mt-2" >
                            <li class="pl-2 pr-1 py-3 flex items-center justify-between text-sm">
                            <div class="w-0 flex-1 flex items-center">

                               
                                <span class=" flex-1 w-0 truncate">
                                 <input type="text" v-model="videoUrl" style="outline:0px;" placeholder="Example: https://youtu.be/xxxxx" class=" m-0  w-full h-10  text-gray-600" />
                                </span>
                            </div>
                            <div class="ml-4 flex-shrink-0">
                                <a  @click="addUploadVideo"  class="font-medium tooltip tooltip-left " data-tip="Submit">
                                 <svg t="1642053114592" class="w-4 h-4 inline-block" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4020" width="200" height="200"><path d="M939.36 218.912a32 32 0 0 1 45.856 44.672l-538.016 552a32 32 0 0 1-43.776 1.92L63.872 526.048a32 32 0 1 1 41.696-48.544l316.768 271.936L939.36 218.88z" p-id="4021"></path></svg>
                                </a>
                                <a  @click="hideUploadVideo" class="font-medium tooltip tooltip-left ml-1 " data-tip="Cancel">
                                   <svg t="1642053188159" class="w-3 h-3 inline-block" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4981" width="200" height="200"><path d="M953.6 0L1024 73.856 583.808 523.008l418.56 427.136L930.944 1024 512 596.352 93.056 1024l-70.4-73.856L440.448 523.52 0 73.856 71.424 0l440.96 450.176L953.472 0z" p-id="4982"></path></svg>
                                   </a>
                            </div>
                            </li>
                             
                        </ul>
                        <div v-if="materials && materials.length" class="max-h-36 overflow-y-auto overflow-x-hidden mt-5 border p-3 border-gray-300">
                          
                        <div class="upload text-gray-600 mb-5 " >
                         <h3>Uploads:</h3>                   
                        <ul role="list" class="divide-y divide-gray-200">
                            <li  v-for="(material,key) in materials" v-bind:key="key" class="py-3 flex items-center justify-between text-sm">
                            <div class="w-0 flex-1 flex items-center">
                                <img v-if="material.type=='image'" class="flex-shrink-0   w-12  h-auto" :src="material.url">
                                <iframe v-if="material.type=='youtube_video'" class="flex-shrink-0   w-20 h-20 " :src="material.url" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>  
                                
                                <span class="ml-2 flex-1 w-0 truncate">
                                 <textarea @keyup="write_caption" :data-key="key" :value="material.caption" type="text" style="outline:0px;" placeholder="Write a caption..." class=" m-0 w-full h-10 border-b border-gray-200 text-gray-600"></textarea>
                                 <p v-if="material.percent">Uploading:{{material.percent}}%</p>
                                </span>
                                
                            </div>
                            <div class="flex-shrink-0 tooltip ml-2" data-tip="Remove" @click="removeImage(key)" :data-key="key">
                                 <svg t="1642053188159" class="w-4 h-4 inline-block" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4981" width="200" height="200"><path d="M953.6 0L1024 73.856 583.808 523.008l418.56 427.136L930.944 1024 512 596.352 93.056 1024l-70.4-73.856L440.448 523.52 0 73.856 71.424 0l440.96 450.176L953.472 0z" p-id="4982"></path></svg>
                            </div>
                            </li>
                            
                        </ul>
                </div>

               
                 </div>

                          </div>
                            </div>
                        </div>
                       
    <div class="modal-action">
      <label v-if="addTagBox" :data-modalName="'tag'+modalName" @click="nextStep($event)" class="btn btn-primary">Next</label>
      <label v-else  @click="postTopic" class="btn btn-primary">Submit</label>
      <label :for="modalName" class="btn border-0 bg-gray-400 hover:bg-gray-500 ">Close</label> 
    </div>
  </div>
</div>
 

 <!-- tags -->
<input  v-if="addTagBox" type="checkbox" :checked="showTagBox" v-model="showTagBox"   :id="'tag'+modalName" class="modal-toggle"> 
<div class="modal"  v-if="addTagBox">
  
  <div class="modal-box  text-gray-600">
      <h1 class="border-b border-gray-200 py-2">Topic Category</h1>
      <div class="mt-3 relative">
        <select v-model="userCategoryId" class="select select-bordered w-full max-w-xs">
            <option value="0" disabled="disabled" selected="selected">Choose your category</option> 
            <option  v-for="(c,k) in userCategorys" v-bind:key="k" :value="c.score" :selected="c.score==userCategoryId">{{c.value}}</option> 
        </select>
        <a class=" cursor-pointer text-success" @click="showNewCategoryBox">New Category</a>
        <div class=" bg-white absolute w-full border-b-2 newCategoryBox" v-if="newCategoryBoxStatus">

            <div class="form-control">
            <label class="label">
                <span class="label-text">Title (required)</span>
            </label> 
            <input type="text" placeholder="Add title" class="input input-bordered">
            </div>
            <div class=" text-right pt-3 pb-3">
                <a class="cursor-pointer"  @click="hideNewCategoryBox($event)" >Cancel</a> <a @click="newCategory($event)" class="cursor-pointer text-success ml-2">Create</a>
            </div>
        </div>
     </div>
   <h1 class="border-b border-gray-200 py-2">Topic Tags</h1>
   <div class="h-36 w-full overflow-y-scroll overflow-x-hidden py-3">
     <!-- <h2 class="mt-3">Community Tags</h2> -->
     <div class="label_div">
       <div class="badge  badge-outline  cursor-pointer mx-1" v-for="(communityTag,key) in communityTags" v-bind:key="key" @click="addTag(communityTag.name,communityTag.id)">{{communityTag.name}}</div> 
     </div>
     <h2 class="mt-3">Ski Resorts</h2>
     <div class="label_div">
        <div class="badge  badge-outline   cursor-pointer mx-1" v-for="(resort,key) in resorts" v-bind:key="key" @click="addTag(resort)">{{resort}}</div> 
        
     </div>
      
  
   </div>
   <ul role="list" class="border-b border-t border-gray-200 relative">
                            <li class=" flex items-center justify-between text-sm">
                            <div class="w-0 flex-1 flex items-center">

                               
                                <span class=" flex-1 w-0 truncate">
                                 <input type="text" @keyup="enter_tags" data-name="enter_tags" id="enter_tags_input"  style="outline:0px;" placeholder="Enter tags here, between 3 and 30 characters each." class=" m-0  w-full h-10  text-gray-600" />
                                </span>
                            </div>
                            <div class="ml-4 flex-shrink-0">
                                 <a  class="font-medium tooltip " @click="addTagFromInput"  data-tip="Add tags">
                                  <svg t="1642069436312" class="inline-block w-6 h-6" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9569" width="200" height="200"><path d="M1024 0 384 704 0 576 1024 0ZM1024 0 1024 896 483.414063 732.851565 1024 0ZM384 740.488282 364.578125 734.300781 512 1024 606.945313 805.5 476.078125 768 496.279297 960 384 740.488282Z" p-id="9570"></path></svg>
                                </a>
                               
                            </div>
                            </li>
                             <div v-if="showSearchBox && searchRes.length>0"  class="origin-top-right absolute right-0  top-10  searchBox" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
                                <span @click="hideSearchBox"  class="font-medium cursor-pointer     top-2 right-2 absolute " data-tip="Close">
                                  <svg t="1643189278604" class="inline-block w-7 h-7 text-gray-900" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17054" width="200" height="200"><path d="M509.44 935.424c-233.984 0-424.448-190.464-424.448-424.448s190.464-424.448 424.448-424.448 424.448 190.464 424.448 424.448-190.464 424.448-424.448 424.448z m0-797.696c-205.824 0-373.248 167.424-373.248 373.248s167.424 373.248 373.248 373.248 373.248-167.424 373.248-373.248-167.424-373.248-373.248-373.248z" fill="#000000" p-id="17055"></path><path d="M338.944 681.472c-10.24-10.24-10.24-26.112 0-36.352l304.128-304.128c10.24-10.24 26.112-10.24 36.352 0s10.24 26.112 0 36.352l-304.128 304.128c-9.728 9.728-26.112 9.728-36.352 0z" fill="#000000" p-id="17056"></path><path d="M679.424 681.472c-10.24 10.24-26.112 10.24-36.352 0L338.944 376.832c-10.24-10.24-10.24-26.112 0-36.352s26.112-10.24 36.352 0l304.128 304.128c10.24 10.24 10.24 26.624 0 36.864z" fill="#000000" p-id="17057"></path></svg>
                                </span> 
                                <a   v-for="(keyword,key) in searchRes"  v-bind:key="key" @click="selectSearchTagToInput(keyword)"  class="block px-4 py-2   text-gray-700 cursor-pointer" role="menuitem" tabindex="-1" id="user-menu-item-0">
                                    {{keyword}}
                                </a>
                           </div>
                             
                        </ul>
     <div class="mt-5" v-if="tags.length>0">
         <h2>Tags</h2>
        <div class="label_div">
            <div class="my-1 indicator mr-4" v-for="(tag,key) in tags"  v-bind:key="key">
                <div class="indicator-item badge cursor-pointer" @click="delTag(key)">x</div> 
               <div class="badge badge-primary ">{{tag}}</div> 
            </div>
             
            
             
        </div>
    </div>
   <div class="modal-action">
        <a   @click="postTopic" class="btn btn-primary">Submit</a> 
        <label :for="'tag'+modalName" class="btn border-0 bg-gray-400 hover:bg-gray-500">Close</label>
     
     
    </div>
  </div>
</div>

</div>
</template>
<script>
import * as qiniu from 'qiniu-js';
  var timer = null;
export default {
   props: {
    event: {
      type: Object,
      default: () => {},
    },
    type: {
      type: String,
      default: "topic",
    },
    intdata: {
      type: Object,
      default:() => {
          return {
              content:''
          }
      },
    },
    addTagBox:{
      type: Boolean,
      default: false,
    },
    reload:{
      type: Number,
      default: 0,
    },
    // POST TOPIC  extend 其它字段
    // extend:{
    //   type: Object,
    //   default: () => {},
    // },
  },
 data() {
    let data =  {
         
        uploadVideoState:false,
        videoUrl:'',
        cover:{
            percent:0,
            url:''
        },
        newCategoryBoxStatus:false,
        cid:5,
        modalName:'my-modal-topic',
        showSearchBox:false,
        tags:[],
        showTagBox:false,
        title:'',
        content:'',
        materials:[],
        userCategorys:[],
        userCategoryId:0,
        // images:[],
        communityTags:[
           {
               "name":"Used Skis/Snowboards",
               "id":4
           } ,
           {
               "name":"Discussion",
               "id":5
           } ,
           {
               "name":"Feedback",
               "id":6
           } ,
             
        ],
        // videos:[],
        resorts:[],
        searchRes:[],
        contentPlaceholder:this.type=='topic'?"Write a description...":'Add a public comment...',
    }
    data =  this.int(data)
    return data;
},

watch: {
    reload (val) {
        //console.log("reload:",val)
        this.reInt();
    } 
},
      
async mounted() {
    // if(this.type=="topic"){
         
    // }
   
     
    // var resorts =[];
    // //console.log("list",list);
    // for (const element of list) {
    //     resorts.push(element.title);
    // }
    // this.resorts = resorts;
    // this.$tools.alert("success","100",111111)
},


 methods: {
       showNewCategoryBox(){
           this.newCategoryBoxStatus = true;
       },
       hideNewCategoryBox(){
           this.newCategoryBoxStatus = false;
       },
       nextStep(event){
            var el = event.currentTarget;
            var name = $(el).attr("data-modalName");
            document.getElementById(name).checked = true
       },
       async newCategory(event){
          
            var el = event.currentTarget;
            let categoryName = $(el).parents(".newCategoryBox").find("input").val();
            if(categoryName==""){
                 this.$tools.alert("error","Title required!");
                return;
            }
            let post ={
                categoryName:categoryName
            };
            //this.$tools.showToast();
            let res = await  this.$axios.post("snogogo_nuxt/user/createUserCategory",post)
            //this.$tools.hideToast();
            if(res.code>0){
                this.$tools.alert("error", res.msg)
                return;
            }
            this.getUserCategorys();
       },
       async checkboxShow(event){
             var el = event.currentTarget;
             var checked = document.getElementById(this.modalName).checked;
             if(checked && this.type=="topic" && this.resorts.length==0){
                 this.resorts = await this.getResorts();
                 await this.getUserCategorys();
             }
            // console.log("checkboxShow:",this.type,"modalName:",this.modalName, el.checked,this.resorts)
            if(checked && this.$store.state.user.uid==0){
                document.getElementById("SnogogologinBox").checked = true
                el.checked = false
            }
        },
        int(data){
             for (const key in this.intdata) {
                data[key] = this.intdata[key];
            }
            return data;
        },
        reInt(){
             for (const key in this.intdata) {
                this[key] = this.intdata[key];
            }
        },
        async getUserCategorys(){
            //this.$tools.showToast();
            let res = await  this.$axios.get("snogogo_nuxt/user/getUserCategory")
            //this.$tools.hideToast();
            if(res.code>0){
                this.$tools.alert("error", res.msg)
                return;
            }
            if( res.data  &&  res.data.length>0){
                this.userCategorys =  res.data;
            }else{
                this.userCategorys =  [];
            }
            this.hideNewCategoryBox();
            
        },

         async getResorts(kw="",limit=50){
            var post ={};
            if(kw){
               post.keywords=kw; 
            }
            //this.$tools.showToast();
            let res = await  this.$axios.post("snogogo_nuxt/api/search_resorts",post)
            //this.$tools.hideToast();
            if(res.code>0){
                this.$tools.alert("error",res.code+":"+res.msg)
                return;
            }
            if( res.data  &&  res.data.length>0){
                return res.data;
            }else{
                return [];
            }
            
            
        },
         async postTopic(){
             if(this.userCategoryId>0){
                 var categoryName = $("#tag"+this.modalName).next().find("select").find("option:selected").text();
                 this.pushTags(categoryName);
             }
             var cover = (this.cover && this.cover.key) ? this.cover.key : '';
             var cid = (this.intdata && this.intdata.cid)?this.intdata.cid :this.cid;
             var extend = (this.intdata && this.intdata.extend)?this.intdata.extend: {};
             var topic = {
                    cid:cid ,
                    type:this.type,
                    title:this.title,
                    content: document.getElementById(this.modalName+'_content').value,
                    tags:  this.tags,
                    cover:cover,
                    materials:this.materials,
                    pid:0,
                    toPid:0,
                    tid:0,
                    userCategoryId:this.userCategoryId,
                    extend: extend,
                    skiResortId:0
             }
             if(this.intdata.pid){
                 topic.pid = this.intdata.pid;
             }
             if(this.intdata.mainPid){
                 topic.mainPid = this.intdata.mainPid;
             }
             
            if(this.intdata.toPid){
                 topic.toPid = this.intdata.toPid;
             } 
             if(this.intdata.tid){
                 topic.tid = this.intdata.tid;
             }
             if(this.intdata.skiResortId){
                 topic.skiResortId = this.intdata.skiResortId;
             }
             //this.$tools.showToast();
            //res post
            let res = await  this.$axios.post("snogogo_nuxt/api/post",topic);
            //this.$tools.hideToast();
            if( res.code>0){
                this.$tools.alert("error", res.msg);
                return;
            }
            if(this.type=="topic"){
                window.location.href="/topic/"+res.data.slug;
            }
            //console.log("topic:",topic,"res:",res)
            if(res.code>0){
                this.$tools.alert("error", res.msg);
                return;
            }
            this.$tools.alert("success", res.msg);
            document.getElementById(this.modalName).checked=false
            window.location.reload();
            //  //console.log("postTopic topic:",topic);
         },
         search_resorts(){
            var resorts_kw =  document.getElementById("enter_resorts_input").value;
            // resorts_kw
            //console.log("resorts_kw:",resorts_kw);

        },
        hideSearchBox(){
            this.showSearchBox=false;
        },
        addTagFromInput(){
            var v =$("#tag"+this.modalName).next().find("#enter_tags_input").val();
           $("#tag"+this.modalName).next().find("#enter_tags_input").val("")
            // var v =  document.getElementById("enter_tags_input").value;
            // document.getElementById("enter_tags_input").value="";
            
            this.pushTags(v);
            this.showSearchBox=false;
            
        },
        selectSearchTagToInput(text){
            // document.getElementById("enter_tags_input").value=text;
           $("#tag"+this.modalName).next().find("#enter_tags_input").val(text)
             this.showSearchBox=false;
        },
       async  enter_tags(e){ 
            if (e.code =="Enter" || e.key=="Enter") {
                this.addTagFromInput();
                return;
            }
            if (timer) {
                 clearTimeout(timer);
             }

            // var v =  document.getElementById("enter_tags_input").value;
            var v = $("#tag"+this.modalName).next().find("#enter_tags_input").val();
            
            if(v==""){
                this.showSearchBox=false;
                return;
            }
             
            timer = await setTimeout(async ()=> {  
                    
                    this.searchRes = await this.getResorts(v )
                    //  //console.log("searchRes:",this.searchRes );
                    if( this.searchRes.length==0){
                        this.showSearchBox=false;
                        return;
                    }
                    this.showSearchBox=true;
            }, 500);     
           
             
           

        },
        enter_resorts(e){
            if (e.code =="Enter" || e.key=="Enter") {
                this.search_resorts();
            }
        },
        pushTags(tag){
            if( typeof tag =="string" && tag!=""){
                 tag = tag.toLocaleLowerCase();
                if (this.tags.indexOf(tag) === -1) {
                        this.tags.push(tag)
                }
            }
           
        },
     hideUploadVideo(){
         this.uploadVideoState = false;
     },
     showUploadVideo(){
        this.uploadVideoState = !this.uploadVideoState;
     },
     
     removeImage(key){
        this.materials.splice(key,1);
     },
    //  removeVideo(key){
    //      this.videos.splice(key,1);
    //  },
     delTag(key){
         this.tags.splice(key,1);
     },
     addTag(tag,cid=0){
        this.pushTags(tag)
        if(cid>0){
            this.cid = cid
        }
     },
      
     write_caption(e){
        var key = e.target.dataset.key
        // this.images_caption[key] = e.target.value
        this.materials[key].caption = e.target.value
        
     },
    
     addUploadVideo(){
        //  //console.log("videoUrl:",this.videoUrl)
        this.videoUrl=this.getVideoUrl(this.videoUrl);
        if(this.videoUrl==""){
            return;
        }
         this.materials.push({
             url:this.videoUrl,
             type:'youtube_video',
             caption:'',
         });
         this.videoUrl = "";
         this.hideUploadVideo();
         //console.log("  this.materials:",   this.materials)
     },
    //  https://youtu.be/MGF1Bcqt1cs https://www.youtube.com/watch?v=MGF1Bcqt1cs
     getVideoUrl(youtuurl=""){
         if(youtuurl=="" ){
             this.$tools.alert("error","Only support YouTube Url!")
             return "";
         }
         if(youtuurl.indexOf("https://youtu.be/")!=0 && youtuurl.indexOf("https://www.youtube.com")!=0){
             this.$tools.alert("error","Only support YouTube Url!")
             return "";
         }
          
         if( youtuurl.indexOf("https://www.youtube.com")===0){
              youtuurl = "https://www.youtube.com/embed/"+youtuurl.substr(youtuurl.lastIndexOf("v=") + 2, 11);
         }
// https://www.youtube.com/embed/RYK1YbT5q7c
         if( youtuurl.indexOf("https://youtu.be/")===0){
              youtuurl = youtuurl.replace("https://youtu.be/","https://www.youtube.com/embed/");
         }
        //  console.log("youtuurl:",youtuurl.substr(youtuurl.lastIndexOf("v=") + 2, 11))
         return youtuurl;


         

         

     },

     upload(file,key,uploadName){
        //console.log("file:",file,"key:",key,"uploadName:",uploadName);
        var _this = this;
        const token = this.qiniuToken; //从服务器拿的并存在本地data里
        const putExtra = {
            fname: 'test.png',
            params: {},
            mimeType: ['image/png', 'image/jpeg', 'image/gif'],
        };
        const config = {
            useCdnDomain: true, //使用cdn加速
        };
        const observable = qiniu.upload(file, key, token, putExtra, config);
        //console.log("observable:",observable)
        observable.subscribe({
            next: (result) => {
            // 主要用来展示进度
            console.warn(result);
            if(uploadName=="cover"){
                var cover =  _this.cover
                cover.percent =parseInt( result.total.percent);
                _this.cover = cover;
                //console.log("_this.cover:",_this.cover)
            }else{
                 _this.materials[uploadName]={
                     percent:parseInt(result.total.percent),
                     url:'',
                     caption: _this.materials[uploadName] && _this.materials[uploadName].caption,
                     type:'image'
                 }
                  _this.materials.sort()
                 //console.log("_this.images:",_this.materials)
            }   
            
            },
            error: (e) => {
                if(uploadName=="cover"){
                   _this.cover = {}
                }else{
                     _this.materials.splice(uploadName,1); 
                }
                //console.log("上传图片失败:",e)
                //  _this.materials.sort()
                this.$tools.alert("error",e.message);
            },
            complete: (res) => {
                if(uploadName=="cover"){
                    var cover =  _this.cover
                    cover.url = "https://img.snogogo.com/"+res.key+"?imageView2/2/w/400";
                    cover.key = "https://img.snogogo.com/"+res.key;
                    _this.cover=cover;
                    //console.log("_this.cover:",_this.cover)
                }else{
                     _this.materials[uploadName]={
                         percent:100,
                         type:'image',
                         caption:_this.materials[uploadName].caption,
                         url:"https://img.snogogo.com/"+res.key+"?imageView2/2/w/400",
                         key:"https://img.snogogo.com/"+res.key
                     }
                      _this.materials.sort()
                     //console.log("_this.images:",_this.materials)
                }

            
            },
        });
     },
    async changeHandler(e) {
      let _this = this;
      const files = e.target.files ;
      //console.log("type:",file," e.srcElement.dataset:", e.srcElement.dataset.name);
      let uploadName =  e.srcElement.dataset.name;
      if(!this.qiniuToken){
            let res = await  this.$axios.get("snogogo_nuxt/api/uploadToken");
            if(res.code>0){
                this.$tools.alert("error",res.code+":"+res.msg);
                return;
            }
            this.qiniuToken = res.data;
      }
    for (var len=0;len<files.length;len++){
          var file = files[len];
          let key = file.name;
          //   图片组
          if(uploadName=="cover"){
              this.cover={
                  url:'',
                  percent:0
              }
              this.upload(file,key,uploadName)
          }else{
               this.materials.push({
                   url:'',
                   key:'',
                   percent:0
               });
               this.upload(file,key,this.materials.length-1)
          }
          
      }
      
    },
   }
}
</script>
